/*********************************************************************
* JavaScript Document
* Use this script in combination with the NavigationTab.css file
* Sample usage on page:

<script type="text/javascript" src="NavigationTab.js"></script>
<script type="text/javascript">
// define and add listeners for each tab
function onTab1() {
  //...
}
addOnclickListenerToTab('tab1Id', onTab1);
...
function onTabN() {
  //...
}
addOnclickListenerToTab('tabNId', onTabN);
</script>

*************************************************************************/

//Call this function on page to add an onclick listener to a tab.
//Currently work in the IE series' and Netscape series' browsers
function addListenerToTab(tabId, listener) {
  var appName = window.navigator.appName;
  var tab = document.getElementById(tabId);
  if (tab) {
  	if (appName == 'Microsoft Internet Explorer') {
        tab.attachEvent('onclick', listener);
  	} else if (appName == 'Netscape'){
        tab.addEventListener('click', listener);
  	}
  }
}

//A function being attached to the navigation tabs to handle the onMouseOver event
function tabMouseOver() {
	if(!this.Selected) this.className = "tabHover";
	return false;
}

//A function being attached to the navigation tabs to handle the onMouseOut event
function tabMouseOut() {
	if(!this.Selected) this.className = "tab";
	return false;
}

//A function being attached to the navigation tabs to handle the onClick event
function tabClicked() {
var tabContainer = this.parentNode;//td
var tabs = tabContainer.childNodes;
//this is modified by elegantyu
var fortd;
if(tabs.length>1)
fortd=false;
else
fortd=true;
if(fortd)
{
tabContainer=tabContainer.parentNode;//tr
tabs = tabContainer.childNodes;//normal is span,tr is td
}
if(!fortd)
{
        for (var i = 0; i < tabs.length; i++) {
		if(tabs[i].tagName == 'SPAN' && tabs[i].className.toLowerCase() == 'tabselected') {
			tabs[i].className = 'tab';
			tabs[i].Selected = false;
		}
	}
}
else//this is modified by elegantyu
{
  	for (var j = 0; j < tabs.length; j++) {
            var tabschild=tabs[j].childNodes;
            for (var i = 0; i < tabschild.length; i++) {
		if(tabschild[i].tagName == 'SPAN' && tabschild[i].className.toLowerCase() == 'tabselected') {
			tabschild[i].className = 'tab';
			tabschild[i].Selected = false;
		}
            }
	}
}
this.className = 'tabSelected';
this.Selected = true;
}

//This is the only function need to be called to initialize
//the DHTML effects of navigation tabs.
function initNavigationTabs() {
	var tabs = document.getElementsByTagName('SPAN');
	for (var i = 0; i < tabs.length; i++) {
      var className = tabs[i].className.toLowerCase();
		if (className == 'tab' || className == 'tabselected') {
			tabs[i].onmouseover = tabMouseOver;
			tabs[i].onmouseout = tabMouseOut;
			tabs[i].onclick = tabClicked;
			tabs[i].Selected = (className == 'tabselected') ? true : false;
		}
	}
}

//auto initialize the tabs
initNavigationTabs();
